<template>
    <div class='searchBar'>
        <div class='searchWrap'>
            <div class='header' style='display:none'>
                <el-row>
                     <el-col :span="22"> 搜索框</el-col>
                     <el-col :span="2" style='text-align:center' >
                          <el-button type="primary"  @click="emitParent"><i class='el-icon-search' style='margin-right:5px'></i>搜索</el-button>
                     </el-col>
                </el-row>
               
            </div>
            <div class='search hiddenSearchf' ref='search'  v-if="showSearch">
                <el-form :inline="true"  class="demo-form-inline" style='flex:1;' ref="searchForm">
                    <el-form-item :label="item.text" :label-width="item.labelWidth" size="small" v-for="(item,index) in searchStr" :key="index"   v-if="item.isShow!='N'">
                        <my-input styles="width:140px !important"  :id="item.searchId" v-if="item.isShow!='N'&&(item.searchType=='text'||item.searchType=='number')" @input="input" :data="searchStr" :index="index"  isSearch="Y" @inputBlur="inputBlur" @clear="emitParent"></my-input>
                        <input-date styles="width:140px !important"  :id="item.searchId" v-else-if="item.searchType=='date2'" @input="input" :data="searchStr" :index="index"  isSearch="Y"></input-date>
                        <input-date-month styles="width:140px !important"  :id="item.searchId" v-else-if="item.searchType=='month'" @input="input" :data="searchStr" :index="index"  isSearch="Y"></input-date-month>
                        <input-date styles="width:140px !important"  :id="item.searchId" v-else-if="item.searchType=='datetime'" @input="input" :data="searchStr" :index="index"  isSearch="Y" isDatetime="Y"></input-date>
                        
                        <input-select styles="width:140px !important" :id="item.searchId" v-else-if="item.searchType=='select'&&item.valsql" @input="input" :valsql="item.valsql"  :data="searchStr" :index="index"  isSearch="Y" :time="item.time"  :sign="item.sign" @goSearch="emitParent"></input-select>
                        <input-select styles="width:140px !important" :id="item.searchId" v-else-if="item.searchType=='select'" @input="input" :options="item.data"  :data="searchStr" :index="index" :postUrl="item.postUrl"  isSearch="Y"  :time="item.time"  :sign="item.sign" @goSearch="emitParent"></input-select>
                        <select-tree :exkey="item.exkey"  styles="width:140px !important" :id="item.searchId" v-else-if="item.searchType=='select_tree'" @input="input" :url="item.url"  :data="searchStr" :index="index"  isSearch="Y"></select-tree>
                        <city-select :exkey="item.exkey"  :id="item.searchId" styles="width:140px !important"    :data="searchStr"  @input="changeData"   v-else-if="item.searchType=='city_select'" isSearch="Y" :index="index"></city-select>
                        <city-select :exkey="item.exkey"  :id="item.searchId" styles="width:140px !important"    :data="searchStr"  @input="changeData"   v-else-if="item.searchType=='city_selectjs'" isjs="Y" isSearch="Y" :index="index"></city-select>
                        <input-searchtab :id="item.searchId" styles="width:140px !important"    :data="searchStr"  @input="changeData"   v-else-if="item.searchType=='search_tab'" isSearch="Y" :index="index"></input-searchtab>
                        <input-select-multiple styles="width:140px !important" :id="item.searchId" v-else-if="item.searchType=='selectMultiple'&&item.valsql" @input="input" :valsql="item.valsql"  :data="searchStr" :index="index"  isSearch="Y" :time="item.time"  :sign="item.sign" @goSearch="emitParent"></input-select-multiple>
                        <input-select-multiple styles="width:140px !important" @hidenSearchInput="hidenSearchInput" :id="item.searchId" v-else-if="item.searchType=='selectMultipleHidden'&&item.valsql" @input="input" isEmptyHiden="Y" :valsql="item.valsql"  :data="searchStr" :index="index"  isSearch="Y" :time="item.time"  :sign="item.sign" @goSearch="emitParent"></input-select-multiple>
                        <input-year styles="width:140px !important"  :id="item.searchId" v-else-if="item.searchType=='year'" @input="input" :data="searchStr" :index="index"  isSearch="Y"></input-year>
                        
                    </el-form-item>
                    
                </el-form>
                <div :style="{width:rightBtn.exkey.width}" v-if="hasRightBtn" class="rightBtn">
                    {{ rightBtn.text }}
                    <my-input ref="rightBtnInput" @keyup.enter.native="emitParent" :autofocus="true" styles="width:240px !important;height:45px;font-size:18px"  :id="rightBtn.searchId" v-if="(rightBtn.searchType=='text'||rightBtn.searchType=='number')" @input="input" :data="searchStr" :index="rightBtnIndex"  isSearch="Y" @inputBlur="inputBlur" @clear="emitParent"></my-input>
                      
                </div>
                <div style='width:80px;padding-right:10px'>
                  
                    <el-button type="primary"  @click="emitParent"><i class='el-icon-search' style='margin-right:5px;'></i>搜索</el-button>
                 
                     
                </div>
                 <div class='showbar' style='width:30px;cursor:pointer' @click="searchClick"  v-if="searchStr.length>4||(isMobile=='Y'&&searchStr.length>1)" >
                    <i class='el-icon-arrow-down' ref='icons' ></i>
                </div>
            </div>
           

        </div>

         <div class='monthbar' v-if="showMonth">
              <el-select v-model="years" placeholder="选择年" style='width:100px;' class='my-el-select'>
                <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
                </el-option>
            </el-select>
            <div class='month' @click="changeMonth(1)" :class="{'actives':month==1}">
                1月
            </div>
             <div class='month' @click="changeMonth(2)" :class="{'actives':month==2}">
                2月
            </div>
             <div class='month' @click="changeMonth(3)" :class="{'actives':month==3}">
                3月
            </div>
             <div class='month' @click="changeMonth(4)" :class="{'actives':month==4}">
                4月
            </div>
             <div class='month' @click="changeMonth(5)" :class="{'actives':month==5}">
                5月
            </div>
             <div class='month' @click="changeMonth(6)" :class="{'actives':month==6}">
                6月
            </div>
             <div class='month' @click="changeMonth(7)" :class="{'actives':month==7}">
                7月
            </div>
             <div class='month' @click="changeMonth(8)" :class="{'actives':month==8}">
                8月
            </div>
             <div class='month' @click="changeMonth(9)" :class="{'actives':month==9}">
                9月
            </div>
             <div class='month' @click="changeMonth(10)" :class="{'actives':month==10}">
                10月
            </div>
             <div class='month' @click="changeMonth(11)" :class="{'actives':month==11}">
                11月
            </div>
             <div class='month' @click="changeMonth(12)" :class="{'actives':month==12}">
                12月
            </div>
            <div class='month' @click="changeMonth(0)" :class="{'actives':month==0}" v-if="showMonth2||showMonth4">
                全年
            </div>
            <div class='month' @click="changeMonth(13)" :class="{'actives':month==13}" v-if="showMonth3">
                今天
            </div>
            <div class='month' style="width:100px" @click="changeMonth(14)" :class="{'actives':month==14}" v-if="showMonth2">
                选择日期
            </div>
            <div v-show="showDate" v-if="showMonth2">
                <el-date-picker
                    v-model="dates"
                    type="date"
                    size="small"
                    value-format="yyyy-MM-dd"
                    style="width:140px"
                    placeholder="选择日期">
                    </el-date-picker>
            </div>
         </div>
    </div>
    
</template>
<script>
import Vue  from 'vue'
import SelectTree  from '../input/SelectTree'
import inputDate  from '../input/input-date'
import inputDateTime  from '../input/input-datetime'
import inputDateMonth  from '../input/input-date-month'
import myInput  from '../input/myInput'
import inputSelect  from '../input/input-select'
import CitySelect  from '../input/city-select'
import inputSearchtab  from '../input/input-searchtab'
import inputYear  from '../input/input-year'
import inputSelectMultiple  from '../input/input-select-multiple'
export default {
    props:['searchStr'],
    name: "search",
    components: {
       CitySelect,
       SelectTree,
       inputDate,
       inputDateMonth,
       myInput,
       inputSelect,
       inputDateTime,
       inputSearchtab,
       inputSelectMultiple,
       inputYear
    },
    data(){
        return{
            showDate:false,
            dates:"",
            isShowSearch:false,
            search:{
               
            },
            isMobile:"N",
            searchRecod:[],
            showSearch:false,
            years:"2021",
            options:[{
                value:"2021",
                label:"2021"
            }],
            month:-1,
            showMonth:false,
            showMonth2:false,
            showMonth3:false,
            showMonth4:false,
            searchStrOld:"",
            rightBtn:{},
            hasRightBtn:false,
            rightBtnIndex:-1,
            searchType:"",
            isChangeListname:"N"
        }
    }, 
    created(){
        sessionStorage.setItem("searchGroupType","")
        this.searchStrOld=this.searchStr;
        var myDate = new Date();
        var tYear = myDate.getFullYear();
        var tMonth = myDate.getMonth();
        this.years=tYear;

        this.options=[];
        for(let i=7;i>=0;i--){
            this.options.push({
                value:tYear-i,
                label:tYear-i
            })
        }
        this.month=tMonth+1;
        if(localStorage.getItem("ismobile")=="Y"){
            this.isMobile="Y";
        }
        //console.log(this.searchStr,"sss")
        let isSearch=false;
        for(let i=0;i<this.searchStr.length;i++){
            let item=this.searchStr[i];
            this.search[item.searchId.replace("search.","")]=item.vals;

            if(item.vals)
                isSearch=true;
            if(item.searchId=="monthBar"){
                this.showMonth=true;
                this.searchType="";
            }
            if(item.searchId=="monthBar2"){//包含选择日期
                this.showMonth=true;
                this.showMonth2=true;
                this.searchType="";
            }
            if(item.searchId=="monthBar3"){//包含今日
                this.showMonth=true;
                this.showMonth3=true;
                this.searchType="";
            }
            if(item.searchId=="monthBar4"){//包含选择日期和今日
                this.showMonth=true;
                this.showMonth2=true;
                this.showMonth3=true;
                this.searchType="";
            }
            if(item.searchId=="monthBar5"){//包含选择日期和今日
                this.showMonth=true;
                this.showMonth4=true;
                this.searchType="date"
            }
            if(item.searchId=="monthBar6"){
                this.showMonth=true;
                this.showMonth4=true;
                this.searchType="";
            }
            if(item.exkey&&item.exkey.type){
                if(item.exkey.type=="rightBtn"){
                    this.rightBtn=item;
                    item.isShow="N"
                    this.hasRightBtn=true;
                    this.rightBtnIndex=i;
                }
            }
            
        }
        //if(isSearch){
           
            this.emitParent();
       // }
      
            this.showSearch=true;

        let sef=this;
        window.setTimeout(function(){
            sef.changeWidth(); 
            if(localStorage.getItem("sCode")=="lygbyg"){
               
                sef.searchClick();
            }
               
        },1000)
       
    },
    activated(){
        //console.log(this.searchStrOld,"searchStrOld=========================");
    },
    mounted(){
        let sef=this;
        window.setTimeout(function(){
            sef.changeWidth();
           
        },1000)
       // console.log(this.$refs.rightBtnInput,"rightBtnInput")
        try{
            this.$refs.rightBtnInput.focus();
        }catch(e){}
       
    },
    
    methods:{
        hidenSearchInput(item){
            item=JSON.parse(item);
            let index=item.index;
            let type=item.type;
            
            if(type=="hidden"){
              
                this.$refs.searchForm.$children[index].$el.style.setProperty('display','none','important')
                
            }else{
                this.$refs.searchForm.$children[index].$el.style.setProperty('display','inline-block','important')
                this.$refs.search.className="search showSearch";
                this.isShowSearch=true;
                this.$refs.icons.className="el-icon-arrow-up";
            }
           // console.log(this.searchStr)
        },
        inputBlur(data){
           //this.emitParent();
        },
        changeInput(event){
            let id=event.target.getAttribute("id");
            this.search[id]=event.target.value;
        },
        emitParent(){
           
            this.searchRecod=[];
            for(let i=0;i<this.searchStr.length;i++){
                let item=this.searchStr[i];
                let item_={};
                item_.field=item.field;
                item_.val=item.vals;
                item_.searchId=item.searchId;
                item_.searchType=item.searchType;
                item_.searchOper=item.searchOper;
                this.searchRecod.push(item_)
            }
           
            this.$emit('search-event',JSON.stringify(this.searchRecod))
        },
        searchClick(){
            try{
                if(!this.isShowSearch){
                this.$refs.search.className="search showSearch";
                this.isShowSearch=true;
                this.$refs.icons.className="el-icon-arrow-up";
                }else{
                this.$refs.search.className="search hiddenSearch";
                    this.isShowSearch=false;
                    this.$refs.icons.className="el-icon-arrow-down";
                }
                let sef=this;
            }catch(e){}
            
           
            
        },
        input(data){
            data=JSON.parse(data);
            let id=data.id;
            let val=data.val;
            this.search[id]=val;
        },
        changeWidth(){
            /*let el=document.getElementsByClassName("el-form-item__content");
            for(let i=0;i<el.length;i++){
                el[i].style.width="180px";
            }
            let el2=document.getElementsByClassName("el-date-editor");
            for(let i=0;i<el2.length;i++){
                el2[i].style.width="180px";
            }*/
        },
        changeMonth(month){
            
            if(month==0){
                this.showDate=false;
                this.month=month;
                for(let i=0;i<this.searchStr.length;i++){
                    if(this.searchStr[i].searchId=="startDate"){
                        
                        this.$set(this.searchStr[i],"vals",this.years+"-01-01")
                    }else if(this.searchStr[i].searchId=="endDate"){
                        var currentMonthLastDay = new Date(this.years, 12, 0); 
                        this.$set(this.searchStr[i],"vals",this.getDateStr(currentMonthLastDay))
                    }
                }
                if(this.searchType=="date"){
                    let listnames=sessionStorage.getItem("listnames");
                    sessionStorage.setItem("searchGroupType","年")
                    let data={};
                    data.listname=listnames+"年";
                    this.$emit("tab-event",JSON.stringify(data))
                    this.isChangeListname="Y"
                }
            }else if(month<=12){
                this.showDate=false;
                this.month=month;
                month=month<10 ? "0"+month:""+month;
                for(let i=0;i<this.searchStr.length;i++){
                    if(this.searchStr[i].searchId=="startDate"){
                        
                        this.$set(this.searchStr[i],"vals",this.years+"-"+month+"-01")
                    }else if(this.searchStr[i].searchId=="endDate"){
                        var currentMonthLastDay = new Date(this.years, month, 0); 
                    
                        this.$set(this.searchStr[i],"vals",this.getDateStr(currentMonthLastDay))
                    }
                }
                if( this.isChangeListname=="Y"){
                    this.isChangeListname="N"
                    let listnames=sessionStorage.getItem("listnames");
                    let data={};
                    data.listname=listnames;
                    this.$emit("tab-event",JSON.stringify(data))
                }
                
                sessionStorage.setItem("searchGroupType","")
            }else if(month==13){
                this.showDate=false;
                this.month=month;
                var date = new Date();
                let year = date.getFullYear();
                let months = date.getMonth() + 1;
                let day = date.getDate();
                months=months<10 ? "0"+months:months;
                day=day<10 ? "0"+day:day;

                for(let i=0;i<this.searchStr.length;i++){
                    if(this.searchStr[i].searchId=="startDate"){
                        
                        this.$set(this.searchStr[i],"vals",year+"-"+months+"-"+day)
                    }else if(this.searchStr[i].searchId=="endDate"){
                    
                        this.$set(this.searchStr[i],"vals",year+"-"+months+"-"+day)
                    }
                }
                if( this.isChangeListname=="Y"){
                    this.isChangeListname="N"
                    let listnames=sessionStorage.getItem("listnames");
                    let data={};
                    data.listname=listnames;
                    this.$emit("tab-event",JSON.stringify(data))
                }
                    sessionStorage.setItem("searchGroupType","")
            }else if(month==14){
                this.month=month;
                this.showDate=true;
                if( this.isChangeListname=="Y"){
                    this.isChangeListname="N"
                    let listnames=sessionStorage.getItem("listnames");
                    let data={};
                    data.listname=listnames;
                    this.$emit("tab-event",JSON.stringify(data))
                }
                    sessionStorage.setItem("searchGroupType","")
            }
            if(this.month!=14){
                //console.log("changeMonth================"+month);
                //console.log(this.searchStr)
                this.emitParent();
            }
           
        },
        getDateStr(date) {
            var year = "";
            var month = "";
            var day = "";
            var now = date;
            year = ""+now.getFullYear();
            if((now.getMonth()+1)<10){
                month = "0"+(now.getMonth()+1);
            }else{
                month = ""+(now.getMonth()+1);
            }
            if((now.getDate())<10){
                day = "0"+(now.getDate());
            }else{
                day = ""+(now.getDate());
            }
            return year+"-"+month+"-"+day;
        }
    },
    watch:{
        dates(val){
          // console.log("datas---watch")
            for(let i=0;i<this.searchStr.length;i++){
                if(this.searchStr[i].searchId=="startDate"){
                    
                    this.$set(this.searchStr[i],"vals",val)
                }else if(this.searchStr[i].searchId=="endDate"){
                
                    this.$set(this.searchStr[i],"vals",val)
                }
            }
            this.emitParent();
        }
    }
}
</script>
<style  scoped>
    .rightBtn{
        font-size:20px;
        color:#606266;
        line-height:45px;
        display:flex;
        flex-direction: row;
        align-items: center;
       
    }
    .rightBtn>>> input{
        height:45px;
    }
    .searchBar{
     /*   -moz-box-shadow: 2px 2px 5px #888888;
        box-shadow: 2px 2px 5px #888888;*/
    }
    .searchWrap{
        width:100%;
       /* border:1px solid #ddd;*/
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -webkit-box-sizing: border-box;
       /* border-top:2px solid #409EFF;
        border-radius: 5px;*/
        background:#fff;
        min-height:50px;
        color:#aebbc8;

    }
    .searchWrap>>>.el-form-item{
        height:30px;
    }
    .el-form-item__label{
         color:#aebbc8;
    }
    .header{
        height:30px;
        border-bottom: 1px solid #ddd;
        padding:5px;
        line-height:30px;
        padding-left:15px;
       /** background:#409EFF;
        color:#fff; */
    }
  
    .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
        margin-bottom:5px;
    }
    .btn{
        padding-bottom:10px;
    }
    .el-icon-arrow-down{
        cursor:pointer;
        padding-top:10px;
    }
    .el-icon-arrow-down:hover{
        color:thistle;
    }
    .el-icon-arrow-up{
        cursor:pointer;
        padding-top:10px;
    }
    .el-icon-arrow-up:hover{
        color:thistle;
    }
    .showSearch{
        animation: 0.3s showSearcha linear forwards  normal;
    }
    .hiddenSearch{
        animation: 0.3s hiddenSearcha linear forwards  normal;
    }
    .hiddenSearchf{
        height:35px;
    }
    @keyframes showSearcha {
        0% {
        height:35px;
        }
        100% {
            height:'';
        }
    }

    @keyframes hiddenSearcha {
        0% {
            height:'';
        }
        100% {
            height:35px;
        }
    }
    .search{
        padding-top:10px;
        width:100%;
        overflow:hidden;
        margin-bottom:10px;
        display:flex;
        flex-direction: row;
        box-sizing: content-box;
    }
    .search >>> .el-form{
        flex-wrap: wrap !important;
        align-content:flex-start;
    }
    .search.el-form{
        flex-wrap: wrap !important;;
        align-content:flex-start;
    }
    .search>>>.el-form-item__label{
        text-align:center;
    }
    .showbar{
        text-align:center;
        height:32px;
        border-top:1px solid #f6f4f4;
    }
    .showbar:hover{
        background:#ddd;
    }

    .tabGroup{
        margin-right:15px;
        border:1px solid #ddd;
        border-right:0;
        border-bottom:0;
    }
    .el-button{
        padding:8px 15px;
    }
    el-form-item>div{
        width:160px;
    }
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
        width:160px;
    }
    .monthbar{
        display:flex;
        flex-direction: row;
        padding-left:15px;
    }
    .month{
        line-height:30px;
        width:50px;
        text-align: center;
        cursor:pointer;
    }
    .actives{
        background:cornflowerblue;
        color:#fff;
    }
    
        /* selecte 框的高度设置，默认是 40px*/
     .my-el-select>>>   .el-input__inner{
            height: 30px;
        }
        /* 下面设置右侧按钮居中 */
     .my-el-select>>>   .el-input__suffix {
            top: 5px;
        }
    .my-el-select>>>   .el-input__icon {
            line-height: inherit;
        }
    .my-el-select>>>    .el-input__suffix-inner {
            display: inline-block;
        }
    
</style>
